<!--组件-二级菜单-->
<template>
  <div class="bg">
    <div :class="[type == 0 ? '' : 'all']" v-for="(name, index) in sections" v-bind:key="index"
      @click="sectionClick(index)">
      <div :class="[type == 0 ? 'but-padding' : 'but', section == index ? 'selected' : 'unselected']">
        <text :class="['font28', 'text', section == index ? 'main-t1' : 'text3']">{{name}}</text>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .bg {
    flex-direction: row;
    height: 61px;
    border-radius: 14px;
    border-color: #222635;
    border-width: 2px;
  }

  .but {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  .but-padding {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding-left: 30px;
    padding-right: 30px;
  }


  .text {
    flex: 1;
    text-align: center;
    lines: 1;
    text-overflow: ellipsis;
  }
  .selected {
    background-color: #151a2a;
    border-radius: 14px;
    border-color: #1677fe;
    border-width: 2px;
  }
  .unselected {
    background-color: transparent;
    border-color: transparent;
    border-radius: 14px;
    border-width: 2px;
  }
</style>

<script>
  export default {
    props: {
      type: {
        type: Number,
        default: 0, //0左对齐，1均分
      },

      section: {
        type: Number,
        default: 0,
      },

      sections: {
        type: Array,
        default: [],
      },
    },

    data() {
      return {};
    },

    mounted() {},

    methods: {
      /********************************** 点击触发*/
      sectionClick(index) {
        this.$emit("sectionClick", index);
      },
    },
  };
</script>
